<template>
<div>
  <el-form class="actions" :inline="true" :model="filter">
      <el-form-item class="input-title" label="用户名">
        <el-input v-model="filter.username" type="search" placeholder="用户名" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleFilter">查询</el-button>
      </el-form-item>
      <el-form-item class="btn-add">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建用户</el-button>
      </el-form-item>
    </el-form>
    <div>
      <!-- 课程数据展示 table  -->
      <el-table :data="list" v-loading="loading" element-loading-text="数据加载中...">
        <el-table-column prop="uid" label="ID" width="50"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="createtime" label="创建时间"></el-table-column>
        <el-table-column label="操作" align="center" width="260">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="isEdit?'编辑用户':'添加用户'" :visible.sync="dialogVisible" width="40%">
      <el-form
        :model="newuser"
        label-width="150px"
        size="small"
      >
        <el-form-item label="用户名：">
          <el-input v-model="newuser.username" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="newuser.password" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="newuser.phone" style="width: 250px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave()" size="small">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>

const defaultUser = {
  username:"",
  password:"",
  phone:""
  };

export default {
  name: "User",
  title: "用户管理",
  formname:"添加用户",
  //数据部分
  data() {

    //查询条件
    const filter = {
      username: ""
    };
    return {
      loading: false,
      list: [],
      isEdit: false,
      newuser: Object.assign({}, defaultUser),
      dialogVisible:false,
      filter, //查询对象
    };
  },
  //钩子函数，在DOM页面生成之前执行
  created() {
    this.loadCourse();
  },
  //方法集合
  methods: {
    //1、查询所有数据
    loadCourse() {
      this.loading = true;
      const url = "http://localhost:8002/user/findAll";

      //this.axios.get()调用接口失败，不加get调用成功
      //请求后台查询课程列表接口
      return this.axios.get(url)
        .then((resp) => {
          this.loading = false; //关闭加载
          this.list = resp.data.content; //取出数据
        })
        .catch((error) => {
          this.$message.error("数据获取失败! ! !");
        });
    },

    //模糊查询
    handleFilter(){
      debugger
        if(this.filter.username === ""){
          this.loadCourse();
        }else{
          this.loading = true;
          const url = "http://localhost:8002/user/findByName";
            return this.axios.get(url,{
            //准备参数
            params: {
              name: this.filter.username,
            }
          })
          .then(resp => {
            console.log(resp);
            this.loading = false;
            //将响应数据保存到 list
            this.list = resp.data.content;
          })
          .catch(error => {
            this.$message.error("数据获取失败! ! !");
          });
        }
    },

    //修改用户回显
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.formname = "修改用户";
      this.newuser = Object.assign({}, row);
    },

    //添加用户回显
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.formname = "添加用户";
      this.newuser = Object.assign({}, defaultUser);
    },

    //注册 or 修改
    handleSave() {
      debugger
      const data = this.newuser;
      return this.axios.post(
          "http://localhost:8002/user/register",
           data
        )
        .then(res => {
          this.dialogVisible = false;
          this.loadCourse();
        })
        .catch(error => {
          this.$message.error("操作失败! ! !");
        });
    },

    //删除数据
    handleDelete(index, row) {
      this.$confirm("是否要删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        debugger
        this.axios
          .get("http://localhost:8002/user/delete?id=" + row.uid)
          .then(res => {
            this.loadCourse();
          })
          .catch(err => {
            this.$message.error("操作失败! ! !");
          });
      });
    }
  },
};
</script>

<style scope>
/* .courses {
  .actions {
    display: flex;
    align-items: flex-end;
  }

  .input-title {
    .el-form-item__content {
      min-width: 22vw;
    }
  }

  .btn-add {
    margin-left: auto;
  }
} */
</style>